<template>
  <div class="order-detail-container">
    <el-card>
      <div slot="header">
        <span>订单详情</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="goBack">返回</el-button>
      </div>
      
      <div v-if="order">
        <el-descriptions title="订单信息" :column="2" border>
          <el-descriptions-item label="订单编号">{{ order.orderNo }}</el-descriptions-item>
          <el-descriptions-item label="订单状态">{{ getStatusText(order.status) }}</el-descriptions-item>
          <el-descriptions-item label="服务类型">{{ order.serviceTypeName || '加载中...' }}</el-descriptions-item>
          <el-descriptions-item label="衣物类型">{{ order.clothesTypeName || '加载中...' }}</el-descriptions-item>
          <el-descriptions-item label="数量">{{ order.quantity }}</el-descriptions-item>
          <el-descriptions-item label="总金额">¥{{ order.totalAmount }}</el-descriptions-item>
          <el-descriptions-item label="取件地址">{{ order.pickupAddress }}</el-descriptions-item>
          <el-descriptions-item label="送件地址">{{ order.deliveryAddress }}</el-descriptions-item>
          <el-descriptions-item label="取件时间">{{ formatDate(order.pickupTime) }}</el-descriptions-item>
          <el-descriptions-item label="支付方式">{{ getPaymentMethodText(order.paymentMethod) }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ formatDate(order.createTime) }}</el-descriptions-item>
          <el-descriptions-item label="支付时间">{{ order.paymentTime ? formatDate(order.paymentTime) : '未支付' }}</el-descriptions-item>
          <el-descriptions-item label="备注" :span="2">{{ order.remark || '无' }}</el-descriptions-item>
        </el-descriptions>
        
        <div class="action-buttons" v-if="order.status === 0">
          <el-button type="primary" @click="handlePay">去支付</el-button>
          <el-button type="danger" @click="handleCancel">取消订单</el-button>
        </div>
      </div>
      
      <div v-else class="loading-container">
        <el-empty description="订单不存在或已被删除"></el-empty>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getOrderDetail, cancelOrder, payOrder } from '@/api/order'
import { formatDate } from '@/utils/date'

export default {
  name: 'OrderDetail',
  data() {
    return {
      orderNo: this.$route.query.orderNo,
      order: null
    }
  },
  created() {
    this.fetchOrderDetail()
  },
  methods: {
    formatDate,
    async fetchOrderDetail() {
      try {
        const res = await getOrderDetail(this.orderNo)
        if (res.code === 200) {
          this.order = res.data
        } else {
          this.$message.error(res.message)
        }
      } catch (error) {
        this.$message.error('获取订单详情失败')
      }
    },
    getStatusText(status) {
      const statusMap = {
        0: '待支付',
        1: '已支付待取件',
        2: '已取件处理中',
        3: '已完成',
        4: '已取消'
      }
      return statusMap[status] || '未知状态'
    },
    getPaymentMethodText(method) {
      if (!method) return '未支付'
      const methodMap = {
        'alipay': '支付宝',
        'wechat': '微信支付',
        'cash': '现金支付'
      }
      return methodMap[method] || method
    },
    async handlePay() {
      this.$confirm('确认支付该订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const res = await payOrder(this.orderNo, 'alipay') // 简化处理，直接使用支付宝
          if (res.code === 200) {
            this.$message.success('支付成功')
            this.fetchOrderDetail()
          } else {
            this.$message.error(res.message)
          }
        } catch (error) {
          this.$message.error('支付失败')
        }
      }).catch(() => {})
    },
    async handleCancel() {
      this.$confirm('确认取消该订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const res = await cancelOrder(this.orderNo)
          if (res.code === 200) {
            this.$message.success('订单已取消')
            this.fetchOrderDetail()
          } else {
            this.$message.error(res.message)
          }
        } catch (error) {
          this.$message.error('取消订单失败')
        }
      }).catch(() => {})
    },
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.order-detail-container {
  padding: 20px;
}
.action-buttons {
  margin-top: 20px;
  text-align: center;
}
.loading-container {
  padding: 40px 0;
  text-align: center;
}
</style> 